<template>
  <UpdateRecord
      ref="update_record_dialog_ref"
      @refresh_func="refresh()"
  />

  <el-form ref="small_query_form" :label-position=" 'right' " label-width="100px"
           :inline="true" :model="fuzzy_search" style="width: 100%">

    <el-form-item label="物料分组">
      <FuzzySearchMaterialGroup @DataUse="material_group_auto_complete_in_material($event as any)"
                                ref="material_group_fuzzy_search_ref"
                                :disable="false"
                                @DataClear="material_group_clear"/>
    </el-form-item>

    <el-form-item label="物料">
      <FuzzySearchMaterial @DataUse="material_auto_complete_in_material($event as any)"
                                ref="material_group_fuzzy_search_ref"
                                :disable="false"
                                @DataClear="material_clear"/>
    </el-form-item>

    <el-form-item label="处理方分组">
    <FuzzySearchHandleGroup @DataUse="handle_group_auto_complete_in_material($event as any)"
                            ref="handle_group_fuzzy_search_ref"
                            :disable="false"
                            @DataClear="handle_group_clear"/>
    </el-form-item>
    <el-form-item label="处理方">
    <FuzzySearchHandle @DataUse="handle_auto_complete_in_material($event as any)"
                       ref="handle_fuzzy_search_ref"
                       :disable="false"
                       @DataClear="handle_clear"/>
    </el-form-item>


    <el-form-item prop="enable" label="出入库方向">
      <el-radio-group v-model="fuzzy_search.trend">
        <el-radio-button value="in">入库</el-radio-button>
        <el-radio-button value="out">出库</el-radio-button>
        <el-radio-button value="all">全部</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <el-form-item prop="store_type" label="仓库类型">
      <el-radio-group v-model="fuzzy_search.store_type">
        <el-radio-button :value="true">正品库</el-radio-button>
        <el-radio-button :value="false">次品库</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <!-- 日期范围 -->
    <el-form-item label="日期">
      <el-date-picker
          v-model="fuzzy_search.actual_date"
          type="daterange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          value-format="YYYY-MM-DD"
      />
    </el-form-item>

    <!-- 日期范围 -->
    <el-form-item label="操作日期">
      <el-date-picker
          v-model="fuzzy_search.operate_date"
          type="daterange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          value-format="YYYY-MM-DD"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="read_record()">搜索</el-button>
      <el-button @click=" select_small_table_col() ">选择列</el-button>
      <el-button @click=" export_small_table() ">导出表格</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="material_list" style="width: 100%" row-key="id" id="small_table_id" ref="small_table_ref">
    <!--选择框-->
    <el-table-column label="记录id" prop="id" v-if=" record_table_head_optional.id "/>
    <el-table-column label="编码" prop="material_code" v-if=" record_table_head_optional.material_code "/>
    <el-table-column label="名称" prop="material_name" v-if="record_table_head_optional.material_name"/>
    <el-table-column label="型号" prop="material_model" v-if="record_table_head_optional.material_model"/>
    <el-table-column label="整件" prop="whole_piece" v-if="record_table_head_optional.whole_piece"/>
    <el-table-column label="散支" prop="scatt_piece" v-if="record_table_head_optional.scatt_piece"/>
    <el-table-column label="重量" prop="weight" v-if="record_table_head_optional.weight"/>
    <el-table-column label="件支数" prop="set_piece" v-if="record_table_head_optional.set_piece"/>
    <el-table-column label="出入库" prop="trend" v-if="record_table_head_optional.trend">
      <template #default="scope: {row:RecordList}">
        <span>{{ scope.row.trend ? '出库 ' : '入库' }}</span>
      </template>
    </el-table-column>
    <el-table-column label="仓库" prop="store_type" v-if="record_table_head_optional.trend">
      <template #default="scope: {row:RecordList}">
        <span>{{ scope.row.store_type ? '正品库 ' : '次品库' }}</span>
      </template>
    </el-table-column>
    <el-table-column label="处理方" prop="handle_name" v-if="record_table_head_optional.handle_name"/>
    <el-table-column label="日期" prop="actual_date_" v-if="record_table_head_optional.operate_date_"/>
    <el-table-column label="操作人" prop="operator_name" v-if="record_table_head_optional.operator_name"/>
    <el-table-column label="操作日期" prop="operate_date_" v-if="record_table_head_optional.operate_date_"/>
    <el-table-column label="备注" prop="remark" v-if="record_table_head_optional.remark"/>
    <el-table-column align="right" width="140px" v-if="record_table_head_optional.button">
      <template #header>
      </template>

      <template #default="scope">
        <el-button size="small" @click="handleSmallEdit(scope.row)">修改</el-button>
        <el-button size="small" type="danger" @click="handleMaterialDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[100, 200, 500]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total=" total "
  />

  <!-- 选择显示表格的列 -->
  <el-dialog
      v-model="small_table_head_show_visible"
      title="表头选项"
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      :show-close='false'
  >
    <el-checkbox v-model="record_table_head_optional.id" label="物料id"/>
    <el-checkbox v-model="record_table_head_optional.trend" label="物料编码"/>
    <el-checkbox v-model="record_table_head_optional.whole_piece" label="整件"/>
    <el-checkbox v-model="record_table_head_optional.scatt_piece" label="散支"/>
    <el-checkbox v-model="record_table_head_optional.weight" label="重量"/>
    <el-checkbox v-model="record_table_head_optional.remark" label="备注"/>
    <el-checkbox v-model="record_table_head_optional.handle_name" label="处理方名称"/>
    <el-checkbox v-model="record_table_head_optional.operator_name" label="操作人"/>
    <el-checkbox v-model="record_table_head_optional.material_code" label="物料编码"/>
    <el-checkbox v-model="record_table_head_optional.material_name" label="物料名称"/>
    <el-checkbox v-model="record_table_head_optional.material_model" label="物料型号"/>
    <el-checkbox v-model="record_table_head_optional.operate_date_" label="操作日期"/>
    <el-checkbox v-model="record_table_head_optional.actual_date_" label="日期"/>
    <el-checkbox v-model="record_table_head_optional.button" label="操作列"/>
    <el-checkbox v-model="record_table_head_optional.set_piece" label="件支数"/>
    <el-checkbox v-model="record_table_head_optional.store_type" label="仓库种类"/>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="select_material_table_col_confirm()">确定</el-button>
      </span>
    </template>
  </el-dialog>


</template>

<script lang="ts">
export default {
  name: "Record"
}
</script>
<script lang="ts" setup>
import {reactive, ref, watch} from 'vue'
import type {FormInstance} from 'element-plus'
import {ElMessage, ElMessageBox} from "element-plus";
import {MaterialGroupCompletion} from "@/components/inventory/FuzzySearchMaterialGroup.vue";
import {make_excel_file} from "@/hooks/make_excel_file.ts";
import FuzzySearchMaterialGroup from "@/components/inventory/FuzzySearchMaterialGroup.vue";
import UpdateRecord from "@/components/inventory/UpdateRecord.vue";
import {RecordCRUDResp, RecordFuzzySearchResp, RecordList} from "@/api/inventory/record/type.ts";
import FuzzySearchHandleGroup, {HandleGroupAutoCompletion} from "@/components/inventory/FuzzySearchHandleGroup.vue";
import FuzzySearchHandle from "@/components/inventory/FuzzySearchHandle.vue";
import {HandleAutoCompletion} from "@/components/first/FuzzySearchHandleVer2.vue";
import {record_fuzzy_search, req_record_delete} from "@/api/inventory/record";
import {MaterialList} from "@/api/inventory/material/type.ts";
import FuzzySearchMaterial from "@/components/inventory/FuzzySearchMaterial.vue";

const material_group_fuzzy_search_ref = ref()  // 返回页面内容搜索 大类ref
const handle_group_fuzzy_search_ref = ref()  // 返回页面内容搜索 大类ref
const handle_fuzzy_search_ref = ref()  // 返回页面内容搜索 大类ref


const record_table_head_optional = reactive({
  id: true,
  trend: true,
  whole_piece: true,
  scatt_piece: true,
  weight: true,
  remark: false,
  handle_name: true,
  operator_name: true,
  material_code: true,
  material_name: true,
  material_model: true,
  operate_date_: true,
  actual_date_: true,
  set_piece: true,
  button: true,
  store_type: true
})
const small_table_head_show_visible = ref<boolean>() // 决定选择列的框是否显示
// 选择表格可以导出的列
const select_small_table_col = () => {
  small_table_head_show_visible.value = true
}
const select_material_table_col_confirm = () => {
  small_table_head_show_visible.value = false
}
// 导出小类表
const export_small_table = () => {
  make_excel_file('记录表', 'small_table_id')
}




// 在清空指定内容之后
const material_group_clear = () => {
  fuzzy_search.material_group_id = null
}
const material_clear = () => {
  fuzzy_search.material_id = null
}
const handle_group_clear = () => {
  fuzzy_search.handle_group_id = null
}
const handle_clear = () => {
  fuzzy_search.handle_id = null
}

//
const material_group_auto_complete_in_material = (cmy: MaterialGroupCompletion) => {
  fuzzy_search.material_group_id = cmy.id
}
const material_auto_complete_in_material = (data: MaterialList) => {
  fuzzy_search.material_id = data.id
}
const handle_group_auto_complete_in_material = (cmy: HandleGroupAutoCompletion) => {
  fuzzy_search.handle_group_id = cmy.id
}
const handle_auto_complete_in_material = (cmy: HandleAutoCompletion) => {
  fuzzy_search.handle_id = cmy.handle_id
}

const refresh = () => {}

// 数据返回函数
const read_record = () => {
  record_fuzzy_search({
    material_group_id: fuzzy_search.material_group_id,
    handle_id: fuzzy_search.handle_id,
    handle_group_id: fuzzy_search.handle_group_id,
    operate_date: fuzzy_search.operate_date,
    actual_date: fuzzy_search.actual_date,
    trend: fuzzy_search.trend,
    start: (currentPage.value - 1) * pageSize.value,
    stop: currentPage.value * pageSize.value,
    store_type: fuzzy_search.store_type,
    material_id: fuzzy_search.material_id,
  }).then((res: RecordFuzzySearchResp) => {
    material_list.value = res.data.result as RecordList[]
    total.value = res.data.total
    ElMessage.success(res.success?.message)
  })
}

const background = ref<boolean>(true)  // 是否带背景方框
const disabled = ref<boolean>(false)  // 是否可用
const small = ref<boolean>(false)  // 普通大小还是小一号
const currentPage = ref<number>(1)  // 当前所在页数
const pageSize = ref<number>(100)  // 一页有几条记录

const total = ref<number>(0) // 总条数

watch([currentPage, pageSize], () => {
  // 无需对表单进行验证，因为要回传的东西不可能有错
  read_record()
})

// 物料数据变量
const material_list = ref<RecordList[]>([])
// 设定返回小类条件的ref
const small_query_form = ref<FormInstance>()
// 返回物料数据
const fuzzy_search = reactive<{
  material_id: number | null
  material_group_id: number | null
  handle_id: number | null
  handle_group_id: number | null
  enable: 'enable' | 'not_enable' | 'all'
  operate_date: [string, string] | null
  actual_date: [string, string] | null
  trend: 'in' | 'out' | 'all'
  store_type: boolean
}>({
  material_id: null,
  material_group_id: null,
  handle_id: null,
  handle_group_id: null,
  enable: 'all',
  operate_date: null,
  actual_date: null,
  trend: 'all',
  store_type: true,
})

// 删除小类
const handleMaterialDelete = async (row: RecordList) => {
  await ElMessageBox.confirm(
      `您确认删除该记录？`,
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
  // 请求删除
  const res: RecordCRUDResp<'delete'> = await req_record_delete({
    mode: 'delete',
    param: {
      id: row.id
    }
  })
  read_record()
  ElMessage.success({message: res.success?.message})
}

const update_record_dialog_ref = ref()

// 打开修改记录框
const handleSmallEdit = (row: RecordList) => {
  update_record_dialog_ref.value?.open(row)
}
</script>
<style scoped>

</style>